<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试累计运输时间计算</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 1000px;
      margin: 0 auto;
      background-color: #f5f5f5;
    }

    .container {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    h1,
    h2 {
      color: #333;
      border-bottom: 2px solid #409EFF;
      padding-bottom: 10px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #555;
    }

    input,
    select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }

    button {
      background: #409EFF;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-right: 10px;
    }

    button:hover {
      background: #337ecc;
    }

    .result {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      background: #fafafa;
      white-space: pre-wrap;
      font-family: monospace;
      max-height: 400px;
      overflow-y: auto;
    }

    .error {
      color: #F56C6C;
      background: #FEF0F0;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }

    .success {
      color: #67C23A;
      background: #F0F9FF;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }

    .info {
      background: #e8f4fd;
      padding: 10px;
      border-radius: 4px;
      margin: 10px 0;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
    }

    .comparison-table th,
    .comparison-table td {
      padding: 8px 12px;
      text-align: left;
      border: 1px solid #ddd;
    }

    .comparison-table th {
      background: #f8f9fa;
      font-weight: bold;
    }

    .old-logic {
      background: #fff3cd;
    }

    .new-logic {
      background: #d1ecf1;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>🧮 测试累计运输时间计算</h1>

    <div class="info">
      <strong>计算逻辑变更说明：</strong>
      <p><strong>原逻辑：</strong>计算两个相邻城市之间的运输时间</p>
      <p><strong>新逻辑：</strong>计算从起始点到第一次进入该城市的累计运输时间</p>
      <br>
      <p><strong>举例：</strong></p>
      <ul>
        <li>路线：长春 → 沈阳 → 唐山 → 天津</li>
        <li>原逻辑：沈阳显示"长春到沈阳的时间"，唐山显示"沈阳到唐山的时间"</li>
        <li>新逻辑：沈阳显示"长春到沈阳的累计时间"，唐山显示"长春到唐山的累计时间"</li>
      </ul>
    </div>
  </div>

  <div class="container">
    <h2>📋 测试运输时间计算</h2>

    <div class="form-group">
      <label for="departureCity">出发城市:</label>
      <input type="text" id="departureCity" placeholder="例如: 长春" value="长春">
    </div>

    <div class="form-group">
      <label for="destinationCity">目的城市:</label>
      <input type="text" id="destinationCity" placeholder="例如: 天津" value="天津">
    </div>

    <button onclick="testTimeCalculation()">测试时间计算</button>
    <button onclick="clearResult()">清空结果</button>
  </div>

  <div class="container">
    <h2>📊 测试结果</h2>
    <div id="result"></div>
  </div>

  <script>
    const baseURL = 'http://localhost:8080';

    function showResult (title, data) {
      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = `
                <h3>${title}</h3>
                <div class="result">${JSON.stringify(data, null, 2)}</div>
            `;
    }

    function showError (message) {
      document.getElementById('result').innerHTML = `<div class="error">❌ 错误: ${message}</div>`;
    }

    function showSuccess (message) {
      document.getElementById('result').innerHTML = `<div class="success">✅ ${message}</div>`;
    }

    function clearResult () {
      document.getElementById('result').innerHTML = '';
    }

    // 测试时间计算
    async function testTimeCalculation () {
      const departureCity = document.getElementById('departureCity').value;
      const destinationCity = document.getElementById('destinationCity').value;

      if (!departureCity || !destinationCity) {
        showError('请输入出发城市和目的城市');
        return;
      }

      try {
        showResult('测试运输时间计算', '正在计算...');

        const response = await fetch(`${baseURL}/pack/locationLog/analysis/cityTransit?departureCity=${encodeURIComponent(departureCity)}&destinationCity=${encodeURIComponent(destinationCity)}`);
        const data = await response.json();

        console.log('时间计算结果:', data);

        if (data.code === 200 && data.data) {
          const analysisData = data.data;

          let resultHtml = `
                        <h3>🧮 累计运输时间计算结果</h3>
                        <div class="info">
                            <p><strong>路线：</strong>${analysisData.departureCity} → ${analysisData.destinationCity}</p>
                            <p><strong>运单数量：</strong>${analysisData.wayBillCount}</p>
                            <p><strong>总平均运输时间：</strong>${analysisData.totalTransitTime}小时</p>
                        </div>
                    `;

          if (analysisData.passedCities && analysisData.passedCities.length > 0) {
            resultHtml += `
                            <h4>各城市累计到达时间：</h4>
                            <table class="comparison-table">
                                <thead>
                                    <tr>
                                        <th>顺序</th>
                                        <th>城市</th>
                                        <th>节点类型</th>
                                        <th>累计运输时间(小时)</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                        `;

            analysisData.passedCities.forEach((city, index) => {
              const timeExplanation = index === 0
                ? '起始点，时间为0'
                : `从${analysisData.departureCity}到${city.cityName}的累计时间`;

              const nodeType = index === 0
                ? '起点'
                : (index === analysisData.passedCities.length - 1 ? '终点' : '途经点');

              resultHtml += `
                                <tr class="new-logic">
                                    <td>${city.passOrder}</td>
                                    <td>${city.cityName}</td>
                                    <td>${nodeType}</td>
                                    <td>${city.averageStayTime || 0}</td>
                                    <td>${timeExplanation}</td>
                                </tr>
                            `;
            });

            resultHtml += `
                                </tbody>
                            </table>
                        `;

            resultHtml += `
                            <div class="info" style="margin-top: 20px;">
                                <h4>🔍 计算逻辑说明：</h4>
                                <ul>
                                    <li><strong>起始城市（${analysisData.departureCity}）：</strong>累计时间为0小时</li>
                                    <li><strong>中转城市：</strong>显示从起始点到第一次进入该城市的累计时间</li>
                                    <li><strong>目的城市（${analysisData.destinationCity}）：</strong>显示从起始点到到达目的地的总时间</li>
                                </ul>
                                <p><strong>优势：</strong>用户可以直观地看到货物到达每个城市需要多长时间，便于时间规划和进度跟踪。</p>
                            </div>
                        `;
          } else {
            resultHtml += `<div class="error">未找到途经城市数据</div>`;
          }

          document.getElementById('result').innerHTML = resultHtml;
        } else {
          showError('计算失败: ' + (data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('测试异常:', error);
        showError('测试异常: ' + error.message);
      }
    }

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function () {
      console.log('累计运输时间计算测试页面已加载');
    });
  </script>
</body>

</html>